<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>调班</title>

	<style>
		body {
			font-size: 0;
		}

		ul {
			font-size: 16px;
			border: solid thin #c8c8c8;
			width: 20vw;
			height: 90vh;
			display: inline-block;
			overflow-y: auto;
			padding: 0;
			margin: 0;
			position: relative;
		}

		ul:nth-of-type(even) {
			border-left: none;
		}

		.title {
			background-color: #69bbf4;
			color: white;
			text-align: center;
			font-size: 20px;
			position: sticky;
			top: 0;
		}

		li {
			display: block;
			height: 7vh;
			line-height: 7vh;
			border-bottom: solid thin #c8c8c8;
			padding: 0 10px;
			overflow-x: hidden;
			text-overflow: ellipsis;
			transition: all .2s;
			cursor: pointer;
		}

		.select {
			background-color: #69bbf4;
			color: white;
		}

		.btns {
			margin: 45vh 30px;
			transform: translateY(-50%);
			display: inline-block;
			vertical-align: top;
		}

		.btns button {
			margin-top: 10px;
			width: 100px;
			height: 30px;
			border: none;
			background-color: #69bbf4;
			color: white;
			cursor: pointer;
			letter-spacing: 5px;
			border-radius: 10px;
			background-color: #69bbf4;
			box-shadow: 0 3px 4px 0 #69bbf4;
		}

		.btns button:active {
			transform: scale(0.95);
		}

		.empty {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			color: #979aa0;
			letter-spacing: 2px;
		}
	</style>

</head>

<body>

	<div id="vue-root">

		<ul>
			<li class="title">班级</li>
			<li v-for="classes in classess" :key="classes.id" @click="class_change(classes)"
				:class="{select:class1Id==classes.id}">
				{{classes.name}} ({{count(classes.id)}}人)
			</li>
		</ul>

		<ul>
			<li class="title">
				<input type="checkbox" @change="all_change" v-model="all">
				<span>学生</span>
			</li>
			<template v-if="students1.length>0">
				<li v-for="student in students1" :key="student.id">
					<input type="checkbox" v-model="student.checked">{{student.name}}
				</li>
			</template>
			<span class="empty" v-else>请选择班级</span>
		</ul>

		<div class="btns">
			<button @click="change">>>></button>
			<br />
			<button @click="submit">保存</button>
		</div>

		<ul>
			<li class="title">班级</li>
			<li v-for="classes in classess" :key="classes.id" @click="class2Id=classes.id"
				:class="{select:class2Id==classes.id}">
				{{classes.name}} ({{count(classes.id)}}人)
			</li>
		</ul>

		<ul>
			<li class="title">学生</li>
			<template v-if="students2.length>0">
				<li v-for="student in students2" :key="student.id" v-text="student.name"></li>
			</template>
			<span class="empty" v-else>请选择班级</span>
		</ul>

	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var schoolId = top_params().id;

		var app = new Vue({
			el: '#vue-root',
			data: {
				all: false,
				classess: [],
				students: [],
				class1Id: null,
				class2Id: null,
			},
			created: function () {
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
					this.getStudents(this.classess);
				}.bind(this));
			},
			methods: {
				class_change: function (classes) {
					this.class1Id = classes.id;
					this.all = false;
				},
				all_change: function () {
					this.students1.forEach(function (item) {
						item.checked = this.all
					}.bind(this))
				},
				getStudents: function (classess) {
					var _this = this;
					classess.forEach(function (it) {
						axios.get('/pc/student/all/' + it.id).then(function (res) {
							res.data.forEach(function (s) {
								s.cid0 = s.cid = it.id;
								_this.students.push(s);
							});
						});
					});
				},
				students0: function (cid) {
					if (!cid) return [];
					return this.students.filter(function (it) {
						return it.cid == cid;
					});
				},
				change: function () {
					var cid = this.class2Id;
					if (!cid) return;
					this.students1.filter(function (it) {
						return it.checked;
					}).forEach(function (it) {
						it.cid = cid;
						it.checked = false;
					});
				},
				count: function (cid) {
					return this.students0(cid).length;
				},
				submit: function () {
					var o = {};
					this.students.filter(function (it) {
						return it.cid != it.cid0;
					}).forEach(function (it) {
						if (!(it.cid in o)) o[it.cid] = [];
						o[it.cid].push(it.id);
					});
					Promise.all(Object.keys(o).map(function (it) {
						return axios.put('/pc/student/classes/' + it, o[it]);
					})).then(function (ress) {
						alert('成功');
						history.back();
					});
				}
			},
			computed: {
				students1: function () {
					return this.students0(this.class1Id);
				},
				students2: function () {
					return this.students0(this.class2Id);
				}
			}
		})
	</script>

</body>

</html>